<template>
  <div class="mainPage_M">
    <head-view @say="onsay"></head-view>
    <div class="out">
    <div class="container">
      <div class="top">
        <div class="left1" :class="{left1_h: isleft_h}"></div>
        <div class="center1">
          <el-carousel :interval="5000" arrow="always">
            <el-carousel-item v-for="item in 4" :key="item">
              <h3>{{ item }}</h3>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="right1">
          <div class="clock-in"></div>
          <div class="vocabulary-book"></div>
        </div>
      </div>
      <div class="medium" :style="{justifyContent: isflex}">
        <div class="left2" v-show="isShow1" :class="{ bigleft: isClass1,left2_h: isleft2_h }">
          <span class="magazine-title" @click="spreadMagazine()">杂志浏览</span>
          <hr
            style="height: 1px; border: none; border-top: 1px solid #987cb9"
          />
          <ul>
            <li>
              <span><router-link to="readMagazine">经济学人</router-link></span>
              
              <span class="iconfont icon-renqiredu">36</span>
            </li>
            <!-- <li><img src="../assets/img/movie1.jpg"></li> -->
            <li>
              <span>The Nation</span
              ><span class="iconfont icon-renqiredu">36</span>
            </li>
            <li>
              <span>纽约时报</span
              ><span class="iconfont icon-renqiredu">36</span>
            </li>
          </ul>
        </div>
        <div class="center2" v-show="isShow2" :class="{ bigcenter: isClass2,center2_h: iscenter_h }">
          <span class="movie-title" @click="spreadMovie()">美视观影</span>
          <hr
            style="height: 1px; border: none; border-top: 1px solid #987cb9"
          />
          <ul>
            <li>
              <span>经济学人</span>
              <span class="iconfont icon-renqiredu">36</span>
            </li>
            <!-- <li><img src="../assets/img/movie1.jpg"></li> -->
            <li>
              <span>The Nation</span>
              <span class="iconfont icon-renqiredu">36</span>
            </li>
            <li>
              <span>纽约时报</span>
              <span class="iconfont icon-renqiredu">36</span>
            </li>
          </ul>
        </div>
        <div class="right2" v-show="isShow3" :class="{ bigright: isClass3,right2_h: isright_h }">
          <span class="fiction-title" @click="spreadFiction()">小说阅读</span>
          <hr
            style="height: 1px; border: none; border-top: 1px solid #987cb9"
          />
          <ul>
            <li>
              <span class="iconfont icon-renqiredu">36</span>
              <span>经济学人</span>
            </li>
            <!-- <li><img src="../assets/img/movie1.jpg"></li> -->
            <li>
              <span class="iconfont icon-renqiredu">36</span>
              <span>The Nation</span>
            </li>
            <li>
              <span class="iconfont icon-renqiredu">36</span>
              <span>纽约时报</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    </div>
    <div class="bottom"></div>  
  </div>
</template>

<script>
import "../assets/css/style.css";
export default {
  name: "mainPage",
  data() {
    return {
      isShow1: true,
      isShow2: true,
      isShow3: true,
      isClass1: false,
      isClass2: false,
      isClass3: false,
      isSpread: false,
      isflex: '',
      iscenter_h: false,
      isleft_h: false,
      isright_h: false,
      isleft2_h: false,
    };
  },
  methods: {
    onsay(ev) {
      switch(ev[0]){
        case 1: this.isleft_h = ev[1];break;
        case 2: this.isleft2_h = ev[1];break;
        case 3: this.iscenter_h = ev[1];break;
        case 4: this.isright_h = ev[1];break;
      }
    },
    spreadMagazine() {
      if (!this.isSpread) {
        this.isSpread = true;
        this.isClass1 = true;
        this.isShow2 = false;
        this.isShow3 = false;
        this.isflex = 'flex-start';
      } else {
        this.isClass1 = false;
        this.isShow2 = true;
        this.isShow3 = true;
        this.isSpread = false;
      }
    },
    spreadFiction() {
      if (!this.isSpread) {
        this.isflex = 'flex-end';
        this.isSpread = true;
        this.isClass3 = true;
        this.isShow1 = false;
        this.isShow2 = false;
      } else {
        this.isClass3 = false;
        this.isShow1 = true;
        this.isShow2 = true;
        this.isSpread = false;
      }
    },
    spreadMovie() {
      if (!this.isSpread) {
        this.isflex = 'center';
        this.isSpread = true;
        this.isClass2 = true;
        this.isShow1 = false;
        this.isShow3 = false;
      } else {
        this.isClass2 = false;
        this.isShow1 = true;
        this.isShow3 = true;
        this.isSpread = false;
      }
    }
  },
};
</script>

<style scoped>
.out {
  background: url('../assets/img/back4.png');
  background-size: 100% 100%;
}
.l {
  float: left;
}
.r {
  float: right;
}
.boxHide {
  display: none;
}
.container {
  width: 84vw;
  height: 80vh;
  margin: 0 auto;
  font-family: "Times New Roman", Times, serif;
  background-color: rgb(148, 155, 155);
  opacity: 90%;
}
.top {
  height: 35vh;
  width: 100%;
  display: flex;
  flex-direction: row;
}
.medium {
  height: 43vh;
  width: 100%;
  display: flex;
  flex-direction: row;
  
  margin-top: 2vh;
}
.bottom {
  height: 10vh;
  width: 100vw;
  background-color: black;
}
.left1 {
  width: 25vw;
  height: 100%;
  background: url(../assets/img/back7.png);
  background-size: 100% 100%;
  border-radius: 10px;
  opacity: 50%;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5;
  -o-transition: all 0.5s;
  transition: all 1s;
  cursor: pointer;
}
.left1:hover,.left1_h {
  opacity: 100%;
}
.center1 {
  width: 32vw;
  height: 100%;
  background-color: rgb(45, 16, 99);
  margin-left: 1vw;
  cursor: pointer;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}
.el-carousel__item:nth-child(2n) {
  background: url("../assets/img/movie01.png");
  background-size: 100% 100%;
}
.el-carousel__item:nth-child(2n + 1) {
  background: url("../assets/img/magazine.png");
  background-size: 100% 100%;
}
.right1 {
  margin-left: 1vw;
  width: 25vw;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: url("../assets/img/back3.png");
  background-size: 100% 100%;
  border-radius: 10px;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5;
  -o-transition: all 0.5s;
  transition: all 1s;
  opacity: 70%;
}
.right1:hover {
  opacity: 100%;
}
.clock-in {
  height: 40%;
  width: 80%;
  margin-bottom: 10px;
  cursor: pointer;
}
.vocabulary-book {
  height: 40%;
  width: 80%;
  cursor: pointer;
}
.left2 {
  width: 25vw;
  background: azure;
  border-radius: 10px;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  opacity: 50%;
  
}
.left2:hover,.left2_h {
  opacity: 100%;
}
.left2 hr {
  margin-right: 72px;
}
.medium .bigleft {
  width: 84vw;
  height: 38vh;
  margin-top: 5vh;
  opacity: 100%;
}
.magazine-title {
  font-size: 27px;
  color: rgb(3, 37, 37);
  cursor: pointer;
  display: flex;
  justify-content: flex-start;
}
.movie-title {
  font-size: 27px;
  color: rgb(3, 37, 37);
  cursor: pointer;
  display: flex;
  justify-content: center;
}
.fiction-title {
  font-size: 27px;
  color: rgb(3, 37, 37);
  cursor: pointer;
  display: flex;
  justify-content: flex-end;
}
.left2 li {
  margin: 10px 0 20px 10px;
  display: flex;
  justify-content: space-between;
}
.left2 li span:nth-of-type(2) {
  margin-right: 60px;
}
.center2 {
  width: 32vw;
  background-color: azure;
  height: 38vh;
  margin-top: 5vh;
  margin-left: 1vw;
  margin-right: 1vw;
  border-radius: 10px;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  opacity: 50%;
}
.center2:hover,.center2_h {
  opacity: 100%;
}
.medium .bigcenter {
  width: 84vw;
  height: 38vh;
  margin-top: 5vh;
  opacity: 100%;
}
.center2 li {
  margin: 10px 0 20px 10px;
  display: flex;
  justify-content: space-between;
}
.center2 li span:nth-of-type(2) {
  margin-right: 60px;
}
.right2 {
  width: 25vw;
  height: 100%;
  background-color: azure;
  border-radius: 10px;
  text-align: right;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  opacity: 50%;
}
.right2:hover,.right2_h {
  opacity: 100%;
}
.medium .bigright {
  width: 84vw;
  height: 38vh;
  margin-top: 5vh;
  opacity: 100%;
}
.right2 hr {
  margin-left: 72px;
}
.right2 li {
  margin: 10px 10px 20px 0;
  display: flex;
  justify-content: space-between;
}
.right2 li span:nth-of-type(1) {
  margin-left: 60px;
}
</style>